<style lang='scss' scoped>
@import "@/assets/css/variable";
.addStaff {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: $main-bgc;
  min-height: 100%;
  font-size: 1.2rem;
  overflow: auto;
  box-sizing: border-box;
  .panle {
    margin-top: 12px;
    border-radius: 8px;
    width: 100%;
    background-color: white;
    .title {
      padding: 24px 18px;
      font-size: 18px;
      color: #333333;
    }
    .panle_data {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      border-top: 1px solid #fafafa;
      padding-bottom: 10px;
      .panle_time {
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px 0;
        border-right: 1px solid #fafafa;
        border-bottom: 1px solid #fafafa;
        span {
          // margin: 8px 0;
        }
        :nth-child(1) {
          color: #a3a3a3;
        }
        :nth-child(2) {
          margin: 12px 0;
          color: #333333;
          font-weight: 600;
        }
        :nth-child(3) {
          color: #a3a3a3;
          padding: 5px;
          background-color: #f7f7f7;
          border-radius: 16px;
        }
      }
    }

    .trading {
      padding: 20px;
      border-top: 1px solid #fafafa;
      color: #a3a3a3;
    }
    .canvues {
      box-sizing: border-box;
      width: 100%;
      padding: 0 20px;
      // background-color: antiquewhite;
      #mountNode {
        width: 100%;
        height: 20rem;
      }
    }
  }
}
</style>
<template>
  <div class="addStaff padding-all-m">
    <BarNav></BarNav>
    <div class="panle">
      <div class="title">实时概况</div>
      <div class="panle_data">
        <div class="panle_time">
          <span>支付订单数</span>
          <span>{{myInfo.order}}</span>
          <div><span>昨日:</span>{{myInfo.yeorder}}</div>
        </div>
        <div class="panle_time">
          <span>支付金额(元)</span>
          <span>{{myInfo.JRZFJE}}</span>
          <span>昨日: {{myInfo.ZRTKJE}}</span>
        </div>
        <div class="panle_time" style="border-right: 0">
          <span>退款订单数</span>
          <span>{{myInfo.JRTKSL}}</span>
          <div><span>昨日:</span>{{myInfo.ZRTKSL}}</div>
        </div>
        <div class="panle_time">
          <span>已退款金额</span>
          <span>{{myInfo.JRTKJE}}</span>
          <div><span>昨日:</span>{{myInfo.ZRTKJE}}</div>
        </div>
        <div class="panle_time">
          <span>未支付数</span>
          <span>{{myInfo.JRWZF}}</span>
          <div><span>昨日:</span>{{myInfo.ZRWZF}}</div>
        </div>
        <div class="panle_time"  style="border-right: 0">
          <span>下单客户数</span>
          <span>{{myInfo.JRXDKH}}</span>
          <div><span>昨日:</span>{{myInfo.ZRXDKH}}</div>
        </div>
      </div>
    </div>

    <div class="panle">
      <div class="title">交易趋势</div>
      <div class="trading">
        <div>支付金额(元)</div>
      </div>
      <div class="canvues">
        <canvas id="mountNode"></canvas>
      </div>
    </div>
  </div>
</template>

<script>
import { Button, Icon, Field, Dialog } from "vant";
import BarNav from "@/components/BarNav";
import F2 from "@antv/f2";

export default {
  name: "business",
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Field.name]: Field,
    [Dialog.name]: Dialog,
    BarNav,
  },
  data() {
    return {
      userInfo: {},
      businessList: [],
      openid: '',
      myInfo: {}
    };
  },
  computed: {},
  created() {
    if (process.env.NODE_ENV == "production") {
      //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到";
    } else {
      this.openid = this.$store.state.openid || localStorage.getItem("OPENID");
    }
    if (
      this.openid == "undefined" ||
      !this.openid ||
      this.openid == undefined
    ) {
      window.location.href = `//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/mobile/index.html`;
      return;
    }
    this.userInfo = this.$store.state.userInfo;
    console.log(this.userInfo, "this.userInfo");
    this.getMercountordernum();
    this.getMerchantItems()
  },
  mounted() {
  },
  methods: {
    getMerchantItems() {
      let params = {
        openid: this.openid,
      };
      this.$request.getMerchantItems(params).then((res) => {
        if (res.ret == 200) {
          this.myInfo = res.data;
          // this.$store.commit("setMyInfo", this.myInfo);
        } else {
        }
      });
    },
    getMercountordernum() {
      let params = {
        id: this.userInfo.id,
      };
      let obj = {};
      let data = [];
      // let list = [];
      this.$request.getMercountordernum(params).then((res) => {
        console.log(res, "res++++++++++++");
        const result = res.data
        result.forEach((item, i) => {
          if(i % 2 == 0){
            obj = {}
          }
          if (i % 2 == 1) {
            obj.value = Number(item)
            data.push(obj)
          } else {
            obj.date = item;
          }
        });
       this.businessList = data
       console.log(this.businessList);
       this.showChart();
      });
    },
    showChart() {
      console.log(this.businessList, 'console.log(this.businessList);');
      var data = this.businessList
      var chart = new F2.Chart({
        id: "mountNode",
        pixelRatio: window.devicePixelRatio,
      });

      chart.source(data, {
        value: {
          tickCount: 5,
          min: 0,
        },
        date: {
          type: "timeCat",
          range: [0, 1],
          tickCount: 3,
        },
      });
      chart.tooltip({
        custom: true,
        showXTip: true,
        showYTip: true,
        snap: true,
        crosshairsType: "xy",
        crosshairsStyle: {
          lineDash: [2],
        },
      });
      chart.axis("date", {
        label: function label(text, index, total) {
          var textCfg = {};
          if (index === 0) {
            textCfg.textAlign = "left";
          } else if (index === total - 1) {
            textCfg.textAlign = "right";
          }
          return textCfg;
        },
      });
      chart.line().position("date*value").style({
        stroke: "#FF642C",
        lineWidth: 2,
      });
      chart.render();
    },
  },
};
</script>